import React from "react";
import { createStore } from "redux";

export const MyContext = React.createContext({ abc: 1 });

export function MyProvider({ children }) {
  return (
    <>
      <MyContext.Provider value={{ aaa: 111 }} xxx={{ ccc: 222 }}>
        <div>{children}</div>
        <MyContext.Consumer>
          {(props) => {
            console.log("consumer props 2", props);
            return <div>from consumer 2</div>;
          }}
        </MyContext.Consumer>
      </MyContext.Provider>
    </>
  );
}



function Wrap(Component) {
  const xxx = function (props) {
    return (
      <MyProvider>
        <Component {...props} />
      </MyProvider>
    );
  };
  return xxx;
}


function Home(props) {
  console.log(props)

  const xxx = useContext(MyContext) // 
  const count = useSelectorRaw(state => state.count) // 全局的

  return (
    <div>
      <ul className="menu">
        <li>
          <Link to="/Home">home</Link>
        </li>
      </ul>

      <div>全局的 count: {count}</div>


      <MyContext.Consumer>
        {(props) => {
          console.log('consumer props', props);
          return <div>from consumer</div>;
        }}
      </MyContext.Consumer>
    </div>
  );
}


Wrap(Home)